<template>
  <a-modal
    centered
    :title="title"
    :width="1000"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :span="24">
            <a-form-item label="工人姓名">
              <a-input placeholder="请输入工人姓名" v-model="queryParam.workerName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="工人种类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplier">
              <a-select
                show-search
                :allowClear="true"
                placeholder="请选择工种"
                option-filter-prop="children"
                v-model="queryParam.workerType"
                style="width: 100%"
                :filter-option="filterOptionKindOfWork"
                @change="changeKindOfWork">
                <a-select-option :value="item.id" v-for="(item,index) in kindOfWorkData" :key="index">
                  {{item.kindOfWork}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <!-- table区域-begin -->
    <div>
      
        <!-- <a-table
          size="small"
          bordered
          rowKey="id"
          :columns="columns1"
          :dataSource="dataSource1"
          :pagination="ipagination"
          :loading="loading"
          :scroll="{ y: 240 }"
          :rowSelection="{selectedRowKeys: selectedRowKeys,onSelectAll:onSelectAll,onSelect:onSelect,onChange: onSelectChange,type:'radio'}"
          @change="handleTableChange">
        </a-table> -->

      <van-radio-group v-model="radio" class="list">
        <van-list
          v-model="loading"
          :finished="finished"
          offset="10"
          finished-text="没有更多了"
          @load="onLoadList"
          :immediate-check="false">
          <van-radio
            style="padding: 0 20px;"
            v-for="(item,i) in dataSource1"
            :key="i"
            :name="i">
            <div class="list-item">
              <div>{{ item.workerName }}</div>
              <div>{{ item.workerPhone }}</div>
              <div>{{item.workerTypeName}}</div>
            </div>
          </van-radio>
        </van-list>
      </van-radio-group>

    </div>
    <!-- table区域-end -->


  </a-modal>
</template>

<script>

  import {filterObj} from '@/utils/util'
  import {getAction} from '@/api/manage'
  import {filterDictTextByCache} from '@comp/dict/JDictSelectUtil'
  import { Toast } from 'vant';
  export default {
    name: "appointWorkerModal",
    data() {
      return {
        radio: '',
        finished: false,
        title: "",
        visible: false,
        placement: 'right',
        description: '',
        // 查询条件
        queryParam: {},
        //职务条件
        post:'',
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        // 表头
        columns1: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 50,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '工人姓名',
            align: "center",
            width: 100,
            dataIndex: 'workerName'
          },
          {
            title: '性别',
            align: "center",
            width: 100,
            dataIndex: 'workerSex',
            customRender: (text) => {
              //字典值翻译通用方法
              return filterDictTextByCache('sex', text);
            }
          },
          {
            title: '电话',
            align: "center",
            width: 100,
            dataIndex: 'workerPhone'
          },
          {
            title: '工种',
            align: "center",
            width: 150,
            dataIndex: 'workerTypeName'
          }
        ],
        //数据集
        dataSource1: [],
        //工种数据
        kindOfWorkData:[],
        // 分页参数
        ipagination: {
          current: 1,
          pageSize: 10,
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        isorter: {
          column: 'createTime',
          order: 'desc',
        },
        loading: false,
        url: {
          list: "/GhWorkerInfo/list",
          kindOfWorkList: "/ghKindOfWork/queryList"
        }
      }
    },
    created() {
      this.loadData();
      this.initKindOfWork();
    },
    methods: {
      onLoadList(){
        this.ipagination.current++
        this.loadData()
      },
      filterOptionKindOfWork(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      changeKindOfWork(value){
        this.loadData(1);
      },
      searchQuery() {
        this.loadData(1);
      },
      searchReset() {
        this.queryParam = {};
        this.loadData(1);
      },
      handleCancel() {
        this.visible = false;
      },
      handleOk() {
        if(this.radio === ''){
          Toast.fail('请选择指派人员');
          return
        }
        this.$emit("selectFinished", this.dataSource1[this.radio]);
        this.visible = false;
      },
      add() {
        this.visible = true;
      },
      loadData(arg) {
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
          this.dataSource1 = []
        }
        var params = this.getQueryParams();//查询条件
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            let list = res.result.records;
            this.dataSource1 = [...this.dataSource1, ...list]
            this.ipagination.total = res.result.total;

            this.loading = false
            if(list.length<10){
              this.finished = true;
            }
          }else{
            this.finished = true;
          }
        })
      },
      initKindOfWork(){
        getAction(this.url.kindOfWorkList).then((res) => {
          if (res.success) {
            this.kindOfWorkData = res.result.records || res.result;
          }
        })
      },
      getQueryParams() {
        var param = Object.assign({}, this.queryParam, this.isorter);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        param.post = this.post;
        return filterObj(param);
      },
      getQueryField() {
        //TODO 字段权限控制
      },
      onClearSelected() {
        this.radio = '';
      },
    }
  }
</script>

<style scoped lang="less">
.list{
  overflow-y: scroll;
  height:380px;
  .list-item{
    display:flex;
    justify-content:space-between;
    height: 40px;
    line-height: 40px;
    border-top: 1px solid #f6f6f6;
    &>div{
      text-align:left;
      &:nth-child(1){
        width: 40%;
      }
      &:nth-child(2){
        width: 40%;
      }
      &:nth-child(3){
        width: 20%;
        text-align:right;
      }
    }
  }
}
.list /deep/ .van-radio__label{
  width:calc(100% - 30px);
}
::-webkit-scrollbar {
    display: none;
  }
.ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }
</style>